<<template>
    <div class="home-container" ref="homeContainer">
        <div class="left-part">
            <creation-panel v-infinite-scroll="load" ref="creationRecommend" />
        </div>

        <div class="right-part-first">
            <OperationTop></OperationTop>
            <Slide></Slide>
            <div class="user-center">
                <el-button style="border: none;" type="primary">前往个人主页</el-button>
            </div>
        </div>

        <el-affix class="right-part-second" :offset="60">
            <RecomendFollow></RecomendFollow>
            <div class="copyright">
                <p style="color:rgb(31, 32, 35);">版权信息：</p>
                <p>Designed by <span>TexBin.</span></p>
                <p>Copyright © 2021-2025 简云阁保留所有权力.</p>
                <br>
                <p style="color:rgb(31, 32, 35);">合作请联系邮箱：</p>
                <p>551256538qq.com</p>
            </div>
        </el-affix>
    </div>
</template>

    <script setup lang="ts">
    import { ref, onMounted, onUnmounted } from 'vue'
    import RecomendFollow from '@/components/RecomendFollow.vue';
    import OperationTop from '@/components/OperationTop.vue';
    import Slide from '@/components/Slide.vue';
    import CreationPanel from '@/components/CreationPanel.vue';
    import store from '@/store';

    const homeContainer = ref<any>(null)
    const creationRecommend = ref<any>(null)

    const change = (el: any) => {
        console.log(el)
    }

    const load = () => {
        creationRecommend.value.load()
    }

    const doScroll = (event: any) => {
        // const scrollHeight = event.target.scrollHeight
        const scrollTop = event.target.scrollTop
        // const clientHeight = event.target.clientHeight
        // console.log(scrollHeight, scrollTop, clientHeight)
        if (scrollTop >= 30) {
            store.commit('setScrollFlag', true)
        }
    }

    onMounted(() => {
        homeContainer.value.addEventListener('scroll', doScroll)
    })

    onUnmounted(() => {
        if (homeContainer.value) {
            homeContainer.value.removeEventListener('scroll', doScroll)
        }
    })

</script>

    <style scoped>

    .home-container {
        width: 100%;
        height: 100vh;
        overflow: scroll;
        display: grid;
        justify-content: center;
        grid-template-columns: 720px 300px;
        grid-template-rows: auto auto;
        grid-column-gap: 8px;
        grid-row-gap: 8px;

        .left-part {
            grid-row-start: 1;
            grid-row-end: 4;
            padding-bottom: 25px;
        }

        .right-part-first {
            padding-bottom: 10px;
            background-color: white;

            .user-center {
                margin: 0 auto;
                padding: 0 10px;

                .el-button {
                    width: 100%;
                }

            }
        }

        .right-part-second {
            padding-bottom: 10px;

            .copyright {
                text-align: center;
                width: 100%;
                padding-top: 10px;

                p {
                    color: rgb(132, 145, 165);
                }
            }
        }

    }

</style>